<template>
  <div class="hazard-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>隐患追踪管理</h1>
      <p>对较危险(C级)和危险(D级)等级矿山进行整改追踪管理</p>
      
      <!-- 统计信息卡片 -->
      <div class="statistics-cards" v-if="!statisticsLoading && statistics">
        <div class="stat-card">
          <div class="stat-number">{{ statistics.total_count }}</div>
          <div class="stat-label">总任务数</div>
        </div>
        <div class="stat-card warning">
          <div class="stat-number">{{ statistics.pending_count }}</div>
          <div class="stat-label">待整改</div>
        </div>
        <div class="stat-card progress">
          <div class="stat-number">{{ statistics.progress_count }}</div>
          <div class="stat-label">整改中</div>
        </div>
        <div class="stat-card success">
          <div class="stat-number">{{ statistics.verified_count }}</div>
          <div class="stat-label">复核通过</div>
        </div>
        <div class="stat-card danger">
          <div class="stat-number">{{ statistics.overdue_count }}</div>
          <div class="stat-label">逾期任务</div>
        </div>
      </div>
    </div>
    
    <!-- 操作控制区域 -->
    <div class="hazard-controls">
      <!-- 搜索和筛选 -->
      <div class="search-section">
        <div class="search-bar">
          <i class="fas fa-search"></i>
          <input 
            type="text" 
            placeholder="搜索任务编号、矿山名称或指标名称..." 
            v-model="searchParams.keyword"
            @keyup.enter="searchHazards"
          >
          <button class="btn btn-primary" @click="searchHazards" :disabled="isLoading">
            <i class="fas fa-search"></i>
            搜索
          </button>
        </div>
        
        <div class="filter-controls">
          <select v-model="searchParams.status" @change="searchHazards">
            <option value="">全部状态</option>
            <option value="待整改">待整改</option>
            <option value="整改中">整改中</option>
            <option value="整改完成">整改完成</option>
            <option value="复核通过">复核通过</option>
          </select>
          
          <select v-model="searchParams.safety_level" @change="searchHazards">
            <option value="">全部等级</option>
            <option value="C级(一般)">较危险(C级)</option>
            <option value="D级(较差)">危险(D级)</option>
          </select>
          
          <button class="btn btn-secondary" @click="clearFilters">
            <i class="fas fa-times"></i>
            清除筛选
          </button>
          
          <button class="btn btn-info" @click="refreshHazards">
            <i class="fas fa-sync"></i>
            刷新
          </button>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <button class="btn btn-success" @click="showCreateModal = true">
          <i class="fas fa-plus"></i>
          新建隐患任务
        </button>
      </div>
    </div>

    <!-- 隐患列表表格 -->
    <div class="hazard-table-container">
      <div class="loading-overlay" v-if="isLoading">
        <div class="loading-spinner">
          <i class="fas fa-spinner fa-spin"></i>
          <p>加载中...</p>
        </div>
      </div>
      
      <table class="hazard-table" v-if="!isLoading">
        <thead>
          <tr>
            <th>任务编号</th>
            <th>矿山名称</th>
            <th>指标名称</th>
            <th>安全等级</th>
            <th>责任人</th>
            <th>整改状态</th>
            <th>关联评价</th>
            <th>指派日期</th>
            <th>截止日期</th>
            <th>剩余天数</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="hazardsList.length === 0">
            <td colspan="11" class="empty-state">
              <i class="fas fa-inbox"></i>
              <p>暂无隐患追踪数据</p>
            </td>
          </tr>
          <tr v-for="hazard in hazardsList" :key="hazard.task_id" :class="{ 'overdue': hazard.is_overdue }">
            <td>{{ hazard.task_id }}</td>
            <td>{{ hazard.mine_name }}</td>
            <td>{{ hazard.indicator_name }}</td>
            <td>
              <span class="level-badge" :class="getSafetyLevelClass(hazard.safety_level)">
                {{ getSafetyLevelText(hazard.safety_level) }}
              </span>
            </td>
            <td>{{ hazard.responsible_person || '待指派' }}</td>
            <td>
              <span class="status-badge" :class="getStatusClass(hazard.status)">
                {{ hazard.status }}
              </span>
            </td>
            <td>
              <span v-if="hazard.evaluation_info" class="evaluation-link" :title="formatEvaluationTooltip(hazard.evaluation_info)">
                {{ hazard.evaluation_info.evaluation_id }}
              </span>
              <span v-else class="text-muted">-</span>
            </td>
            <td>{{ formatDate(hazard.assigned_date) }}</td>
            <td>{{ formatDate(hazard.deadline_date) }}</td>
            <td :class="{ 'text-danger': hazard.is_overdue, 'text-warning': hazard.days_remaining <= 2 }">
              {{ hazard.is_overdue ? '已逾期' : `${hazard.days_remaining}天` }}
            </td>
            <td>
              <div class="action-buttons">
                <button class="btn btn-sm btn-primary" @click="viewHazardDetail(hazard)" title="查看详情">
                  <i class="fas fa-eye"></i>
                </button>
                <button class="btn btn-sm btn-warning" @click="editHazard(hazard)" title="编辑">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="btn btn-sm btn-info" @click="uploadRemediationImage(hazard)" title="上传整改图片">
                  <i class="fas fa-camera"></i>
                </button>
                <button class="btn btn-sm btn-danger" @click="deleteHazard(hazard)" title="删除">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页控制 -->
    <div class="pagination-container" v-if="pagination.total_pages > 1">
      <div class="pagination-info">
        共 {{ pagination.total_count }} 条记录，第 {{ pagination.current_page }} / {{ pagination.total_pages }} 页
      </div>
      <div class="pagination-controls">
        <button 
          class="btn btn-sm btn-secondary" 
          @click="goToPage(pagination.current_page - 1)"
          :disabled="!pagination.has_previous"
        >
          <i class="fas fa-chevron-left"></i>
          上一页
        </button>
        
        <button 
          v-for="page in visiblePages" 
          :key="page"
          class="btn btn-sm" 
          :class="{ 'btn-primary': page === pagination.current_page, 'btn-outline-primary': page !== pagination.current_page }"
          @click="goToPage(page)"
        >
          {{ page }}
        </button>
        
        <button 
          class="btn btn-sm btn-secondary" 
          @click="goToPage(pagination.current_page + 1)"
          :disabled="!pagination.has_next"
        >
          下一页
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>

    <!-- 隐患详情模态框 -->
    <div class="modal-overlay" v-if="showDetailModal" @click="closeDetailModal">
      <div class="modal hazard-detail-modal" @click.stop>
        <div class="modal-header">
          <h3>隐患追踪详情</h3>
          <button class="close-btn" @click="closeDetailModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body" v-if="selectedHazard">
          <div class="detail-grid">
            <div class="detail-group">
              <h4>基本信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">任务编号：</span>
                  <span class="value">{{ selectedHazard.task_id }}</span>
                </div>
                <div class="info-item">
                  <span class="label">矿山名称：</span>
                  <span class="value">{{ selectedHazard.mine_name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">指标名称：</span>
                  <span class="value">{{ selectedHazard.indicator_name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">安全等级：</span>
                  <span class="value">
                    <span class="level-badge" :class="getSafetyLevelClass(selectedHazard.safety_level)">
                      {{ getSafetyLevelText(selectedHazard.safety_level) }}
                    </span>
                  </span>
                </div>
              </div>
            </div>

            <div class="detail-group" v-if="selectedHazard.evaluation_info">
              <h4>关联安全评价信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">评价编号：</span>
                  <span class="value">{{ selectedHazard.evaluation_info.evaluation_id }}</span>
                </div>
                <div class="info-item">
                  <span class="label">评价日期：</span>
                  <span class="value">{{ selectedHazard.evaluation_info.evaluation_date }}</span>
                </div>
                <div class="info-item">
                  <span class="label">评价人：</span>
                  <span class="value">{{ selectedHazard.evaluation_info.evaluator_name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">所属区域：</span>
                  <span class="value">{{ selectedHazard.evaluation_info.region }}</span>
                </div>
                <div class="info-item">
                  <span class="label">矿山类别：</span>
                  <span class="value">{{ selectedHazard.evaluation_info.evaluation_category }}</span>
                </div>
                <div class="info-item">
                  <span class="label">安全等级：</span>
                  <span class="value">{{ selectedHazard.evaluation_info.safety_level }}</span>
                </div>
                <div class="info-item">
                  <span class="label">综合得分：</span>
                  <span class="value">{{ selectedHazard.evaluation_info.comprehensive_score }}</span>
                </div>
              </div>
            </div>

            <div class="detail-group">
              <h4>触发条件</h4>
              <p class="trigger-condition">{{ selectedHazard.trigger_condition }}</p>
            </div>

            <div class="detail-group">
              <h4>整改建议</h4>
              <p class="remediation-suggestion">{{ selectedHazard.remediation_suggestion }}</p>
            </div>

            <div class="detail-group">
              <h4>状态管理</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">责任人：</span>
                  <span class="value">{{ selectedHazard.responsible_person || '待指派' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">当前状态：</span>
                  <span class="value">
                    <span class="status-badge" :class="getStatusClass(selectedHazard.status)">
                      {{ selectedHazard.status }}
                    </span>
                  </span>
                </div>
                <div class="info-item">
                  <span class="label">指派日期：</span>
                  <span class="value">{{ formatDateTime(selectedHazard.assigned_date) }}</span>
                </div>
                <div class="info-item">
                  <span class="label">截止日期：</span>
                  <span class="value">{{ formatDateTime(selectedHazard.deadline_date) }}</span>
                </div>
              </div>
            </div>

            <div class="detail-group" v-if="selectedHazard.completion_date">
              <h4>完成信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">完成日期：</span>
                  <span class="value">{{ formatDateTime(selectedHazard.completion_date) }}</span>
                </div>
                <div class="info-item" v-if="selectedHazard.reviewer">
                  <span class="label">复核人：</span>
                  <span class="value">{{ selectedHazard.reviewer }}</span>
                </div>
              </div>
              <div v-if="selectedHazard.review_comment" class="review-comment">
                <h5>复核意见</h5>
                <p>{{ selectedHazard.review_comment }}</p>
              </div>
            </div>

            <div class="detail-group" v-if="selectedHazard.remediation_image && selectedHazard.remediation_image.has_image">
              <h4>整改图片</h4>
              <div class="remediation-image-container">
                <div class="image-preview">
                  <img 
                    :src="selectedHazard.remediation_image.image_url" 
                    :alt="selectedHazard.remediation_image.image_name"
                    @click="previewImage(selectedHazard.remediation_image.image_url || '')"
                    class="remediation-image"
                  >
                  <div class="image-info">
                    <span class="image-name">{{ selectedHazard.remediation_image.image_name }}</span>
                    <button class="btn btn-sm btn-danger" @click="deleteRemediationImage(selectedHazard)" title="删除图片">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="detail-group" v-if="selectedHazard.attachments && selectedHazard.attachments.length > 0">
              <h4>附件列表</h4>
              <div class="attachments-list">
                <div v-for="(attachment, index) in selectedHazard.attachments" :key="index" class="attachment-item">
                  <i class="fas fa-file"></i>
                  <span class="attachment-name">{{ attachment.file_name }}</span>
                  <span class="attachment-size">{{ formatFileSize(attachment.file_size) }}</span>
                  <span class="attachment-date">{{ formatDateTime(attachment.upload_time) }}</span>
                </div>
              </div>
            </div>

            <div class="detail-group" v-if="selectedHazard.remarks">
              <h4>备注</h4>
              <p class="remarks">{{ selectedHazard.remarks }}</p>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="btn btn-warning" @click="editHazard(selectedHazard)">
            <i class="fas fa-edit"></i>
            编辑
          </button>
          <button class="btn btn-secondary" @click="closeDetailModal">关闭</button>
        </div>
      </div>
    </div>

    <!-- 新建/编辑隐患模态框 -->
    <div class="modal-overlay" v-if="showCreateModal || showEditModal" @click="closeCreateModal">
      <div class="modal hazard-create-modal" @click.stop>
        <div class="modal-header">
          <h3>{{ showEditModal ? '编辑隐患任务' : '新建隐患任务' }}</h3>
          <button class="close-btn" @click="closeCreateModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <form @submit.prevent="submitHazard">
            <div class="form-grid">
              <div class="form-group">
                <label for="mine_name">矿山名称 <span class="required">*</span></label>
                <input 
                  type="text" 
                  id="mine_name" 
                  v-model="hazardForm.mine_name" 
                  required 
                  placeholder="请输入矿山名称"
                >
              </div>

              <div class="form-group">
                <label for="indicator_name">指标名称 <span class="required">*</span></label>
                <input 
                  type="text" 
                  id="indicator_name" 
                  v-model="hazardForm.indicator_name" 
                  required 
                  placeholder="请输入指标名称"
                >
              </div>

              <div class="form-group">
                <label for="safety_level">安全等级 <span class="required">*</span></label>
                <select id="safety_level" v-model="hazardForm.safety_level" required>
                  <option value="">请选择安全等级</option>
                  <option value="C级(一般)">较危险(C级)</option>
                  <option value="D级(较差)">危险(D级)</option>
                </select>
              </div>

              <div class="form-group">
                <label for="responsible_person">责任人</label>
                <input 
                  type="text" 
                  id="responsible_person" 
                  v-model="hazardForm.responsible_person" 
                  placeholder="请输入责任人姓名"
                >
              </div>

              <div class="form-group">
                <label for="evaluation_id">关联安全评价</label>
                <select id="evaluation_id" v-model="hazardForm.evaluation_id">
                  <option value="">请选择关联的安全评价（可选）</option>
                  <option 
                    v-for="evaluation in evaluationsList" 
                    :key="evaluation.evaluation_id" 
                    :value="evaluation.evaluation_id"
                  >
                    {{ evaluation.evaluation_id }} - {{ evaluation.mine_name }}
                  </option>
                </select>
              </div>

              <div class="form-group">
                <label for="deadline_date">截止日期</label>
                <input 
                  type="datetime-local" 
                  id="deadline_date" 
                  v-model="hazardForm.deadline_date"
                >
              </div>

              <div class="form-group" v-if="showEditModal">
                <label for="status">整改状态</label>
                <select id="status" v-model="hazardForm.status">
                  <option value="待整改">待整改</option>
                  <option value="整改中">整改中</option>
                  <option value="整改完成">整改完成</option>
                  <option value="复核通过">复核通过</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="trigger_condition">触发条件 <span class="required">*</span></label>
              <textarea 
                id="trigger_condition" 
                v-model="hazardForm.trigger_condition" 
                required 
                placeholder="请输入触发整改的条件"
                rows="2"
              ></textarea>
            </div>

            <div class="form-group">
              <label for="remediation_suggestion">整改建议 <span class="required">*</span></label>
              <textarea 
                id="remediation_suggestion" 
                v-model="hazardForm.remediation_suggestion" 
                required 
                placeholder="请输入整改建议内容"
                rows="4"
              ></textarea>
            </div>

            <div class="form-group" v-if="showEditModal">
              <label for="reviewer">复核人</label>
              <input 
                type="text" 
                id="reviewer" 
                v-model="hazardForm.reviewer" 
                placeholder="请输入复核人姓名"
              >
            </div>

            <div class="form-group" v-if="showEditModal">
              <label for="review_comment">复核意见</label>
              <textarea 
                id="review_comment" 
                v-model="hazardForm.review_comment" 
                placeholder="请输入复核意见"
                rows="3"
              ></textarea>
            </div>

            <div class="form-group">
              <label for="remarks">备注</label>
              <textarea 
                id="remarks" 
                v-model="hazardForm.remarks" 
                placeholder="请输入备注信息"
                rows="2"
              ></textarea>
            </div>
          </form>
        </div>
        
        <div class="modal-footer">
          <button 
            class="btn btn-primary" 
            @click="submitHazard"
            :disabled="isSubmitting"
          >
            <i class="fas fa-spinner fa-spin" v-if="isSubmitting"></i>
            <i class="fas fa-save" v-else></i>
            {{ isSubmitting ? '保存中...' : (showEditModal ? '更新' : '创建') }}
          </button>
          <button class="btn btn-secondary" @click="closeCreateModal">取消</button>
        </div>
      </div>
    </div>

    <!-- 图片上传模态框 -->
    <div class="modal-overlay" v-if="showImageUploadModal" @click="closeImageUploadModal">
      <div class="modal image-upload-modal" @click.stop>
        <div class="modal-header">
          <h3>上传整改图片</h3>
          <button class="close-btn" @click="closeImageUploadModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div class="upload-container">
            <div class="upload-area" :class="{ 'drag-over': isDragOver }" 
                 @dragover.prevent="handleDragOver"
                 @dragleave.prevent="handleDragLeave"
                 @drop.prevent="handleDrop"
                 @click="triggerFileInput">
              <input 
                ref="fileInput" 
                type="file" 
                accept="image/*" 
                @change="handleFileSelect" 
                style="display: none"
              >
              <div v-if="!selectedImageFile" class="upload-placeholder">
                <i class="fas fa-cloud-upload-alt"></i>
                <p>点击或拖拽图片到此处上传</p>
                <p class="upload-hint">支持 JPG、PNG、GIF、WebP 格式，最大 10MB</p>
              </div>
              <div v-else class="image-preview">
                <img :src="imagePreviewUrl" alt="预览图片" class="preview-image">
                <div class="image-info">
                  <span class="file-name">{{ selectedImageFile.name }}</span>
                  <span class="file-size">{{ formatFileSize(selectedImageFile.size) }}</span>
                </div>
                <button class="btn btn-sm btn-danger" @click="removeSelectedImage">
                  <i class="fas fa-times"></i>
                  移除
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button 
            class="btn btn-primary" 
            @click="uploadImage"
            :disabled="!selectedImageFile || isUploading"
          >
            <i class="fas fa-spinner fa-spin" v-if="isUploading"></i>
            <i class="fas fa-upload" v-else></i>
            {{ isUploading ? '上传中...' : '上传图片' }}
          </button>
          <button class="btn btn-secondary" @click="closeImageUploadModal">取消</button>
        </div>
      </div>
    </div>

    <!-- 图片预览模态框 -->
    <div class="modal-overlay" v-if="showImagePreviewModal" @click="closeImagePreviewModal">
      <div class="modal image-preview-modal" @click.stop>
        <div class="modal-header">
          <h3>图片预览</h3>
          <button class="close-btn" @click="closeImagePreviewModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <img :src="previewImageUrl" alt="预览图片" class="full-image">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import api from '../api'

// 类型定义
interface HazardItem {
  task_id: string
  mine_name: string
  indicator_name: string
  safety_level: string
  trigger_condition: string
  remediation_suggestion: string
  responsible_person: string
  status: string
  assigned_date: string
  deadline_date: string
  completion_date?: string
  reviewer?: string
  review_comment?: string
  remarks?: string
  evaluation_id?: string
  evaluation_info?: {
    evaluation_id: string
    evaluation_date: string
    evaluator_name: string
    region: string
    evaluation_category: string
    safety_level: string
    comprehensive_score: number
  }
  attachments?: any[]
  remediation_image?: {
    has_image: boolean
    image_url?: string
    image_name?: string
  }
  is_overdue: boolean
  days_remaining: number
  created_at: string
  updated_at: string
}

interface StatisticsData {
  total_count: number
  pending_count: number
  progress_count: number
  completed_count: number
  verified_count: number
  overdue_count: number
}

// 简单的消息提示函数，用于替代Element Plus
const showMessage = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
  // 创建一个简单的toast通知
  const toast = document.createElement('div')
  toast.className = `toast toast-${type}`
  toast.textContent = message
  toast.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 4px;
    color: white;
    z-index: 9999;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    ${type === 'success' ? 'background: #2ecc71;' : ''}
    ${type === 'error' ? 'background: #e74c3c;' : ''}
    ${type === 'warning' ? 'background: #f39c12;' : ''}
    ${type === 'info' ? 'background: #3498db;' : ''}
  `
  document.body.appendChild(toast)
  
  setTimeout(() => {
    toast.style.opacity = '0'
    setTimeout(() => document.body.removeChild(toast), 300)
  }, 3000)
}

const showConfirm = (message: string): Promise<boolean> => {
  return new Promise((resolve) => {
    if (confirm(message)) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
}

// ========== 响应式数据 ==========
const isLoading = ref(false)
const statisticsLoading = ref(false)
const isSubmitting = ref(false)

// 搜索参数
const searchParams = reactive({
  keyword: '',
  status: '',
  safety_level: '',
  mine_name: '',
  page: 1,
  page_size: 10
})

// 隐患列表数据
const hazardsList = ref<HazardItem[]>([])
const statistics = ref<StatisticsData | null>(null)
const evaluationsList = ref<any[]>([])
const pagination = reactive({
  current_page: 1,
  total_pages: 1,
  total_count: 0,
  page_size: 10,
  has_next: false,
  has_previous: false
})

// 模态框状态
const showDetailModal = ref(false)
const showCreateModal = ref(false)
const showEditModal = ref(false)
const showImageUploadModal = ref(false)
const showImagePreviewModal = ref(false)
const selectedHazard = ref<HazardItem | null>(null)

// 图片上传相关
const selectedImageFile = ref<File | null>(null)
const imagePreviewUrl = ref('')
const previewImageUrl = ref('')
const isDragOver = ref(false)
const isUploading = ref(false)
const fileInput = ref<HTMLInputElement | null>(null)

// 表单数据
const hazardForm = reactive({
  task_id: '',
  mine_name: '',
  indicator_name: '',
  safety_level: '',
  trigger_condition: '',
  remediation_suggestion: '',
  responsible_person: '',
  deadline_date: '',
  status: '待整改',
  reviewer: '',
  review_comment: '',
  remarks: '',
  evaluation_id: ''
})

// ========== 计算属性 ==========
const visiblePages = computed(() => {
  const current = pagination.current_page
  const total = pagination.total_pages
  const range = 2
  
  let start = Math.max(1, current - range)
  let end = Math.min(total, current + range)
  
  if (end - start < 2 * range) {
    if (start === 1) {
      end = Math.min(total, start + 2 * range)
    } else if (end === total) {
      start = Math.max(1, end - 2 * range)
    }
  }
  
  const pages = []
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})

// ========== 方法定义 ==========

// 加载隐患列表
const loadHazards = async () => {
  try {
    isLoading.value = true
    
    const params = { ...searchParams }
    // 清理空参数
    Object.keys(params).forEach(key => {
      if (!params[key as keyof typeof params] && key !== 'page' && key !== 'page_size') {
        delete params[key as keyof typeof params]
      }
    })
    
    const response = await api.hazard.getList(params)
    if (response.success) {
      hazardsList.value = response.data.hazards || []
      
      // 更新分页信息
      if (response.data.pagination) {
        Object.assign(pagination, response.data.pagination)
      }
    } else {
      showMessage(response.error || '加载隐患列表失败', 'error')
      hazardsList.value = []
    }
  } catch (error) {
    console.error('加载隐患列表失败:', error)
    showMessage('网络错误，请稍后重试', 'error')
    hazardsList.value = []
  } finally {
    isLoading.value = false
  }
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    statisticsLoading.value = true
    const response = await api.hazard.getStatistics()
    if (response.success) {
      statistics.value = response.data
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  } finally {
    statisticsLoading.value = false
  }
}

// 加载安全评价列表
const loadEvaluations = async () => {
  try {
    const response = await api.evaluation.list({ page_size: 100 })
    if (response.success) {
      evaluationsList.value = response.data.evaluations || []
    }
  } catch (error) {
    console.error('加载安全评价列表失败:', error)
  }
}

// 搜索隐患
const searchHazards = () => {
  searchParams.page = 1
  loadHazards()
}

// 清除筛选
const clearFilters = () => {
  searchParams.keyword = ''
  searchParams.status = ''
  searchParams.safety_level = ''
  searchParams.mine_name = ''
  searchParams.page = 1
  loadHazards()
}

// 刷新数据
const refreshHazards = () => {
  loadHazards()
  loadStatistics()
}

// 分页操作
const goToPage = (page: number) => {
  if (page >= 1 && page <= pagination.total_pages) {
    searchParams.page = page
    loadHazards()
  }
}

// 查看隐患详情
const viewHazardDetail = async (hazard: any) => {
  try {
    const response = await api.hazard.getDetail(hazard.task_id)
    if (response.success) {
      selectedHazard.value = response.data
      showDetailModal.value = true
    } else {
      showMessage(response.error || '获取隐患详情失败', 'error')
    }
  } catch (error) {
    console.error('获取隐患详情失败:', error)
    showMessage('网络错误，请稍后重试', 'error')
  }
}

// 编辑隐患
const editHazard = async (hazard: any) => {
  try {
    const response = await api.hazard.getDetail(hazard.task_id)
    if (response.success) {
      const data = response.data
      
      // 填充表单数据
      Object.assign(hazardForm, {
        task_id: data.task_id,
        mine_name: data.mine_name,
        indicator_name: data.indicator_name,
        safety_level: data.safety_level,
        trigger_condition: data.trigger_condition,
        remediation_suggestion: data.remediation_suggestion,
        responsible_person: data.responsible_person,
        deadline_date: data.deadline_date ? formatDateTimeForInput(data.deadline_date) : '',
        status: data.status,
        reviewer: data.reviewer || '',
        review_comment: data.review_comment || '',
        remarks: data.remarks || '',
        evaluation_id: data.evaluation_id || ''
      })
      
      showDetailModal.value = false
      showEditModal.value = true
    } else {
      showMessage(response.error || '获取隐患详情失败', 'error')
    }
  } catch (error) {
    console.error('获取隐患详情失败:', error)
    showMessage('网络错误，请稍后重试', 'error')
  }
}

// 删除隐患
const deleteHazard = async (hazard: any) => {
  try {
    const confirmed = await showConfirm(`确定要删除隐患任务 "${hazard.task_id}" 吗？`)
    if (!confirmed) {
      return
    }
    
    const response = await api.hazard.delete(hazard.task_id)
    if (response.success) {
      showMessage('删除成功', 'success')
      loadHazards()
      loadStatistics()
    } else {
      showMessage(response.error || '删除失败', 'error')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除隐患失败:', error)
      showMessage('网络错误，请稍后重试', 'error')
    }
  }
}

// 提交隐患（新建或更新）
const submitHazard = async () => {
  try {
    isSubmitting.value = true
    
    const formData = { ...hazardForm }
    
    // 处理日期格式
    if (formData.deadline_date) {
      formData.deadline_date = new Date(formData.deadline_date).toISOString().slice(0, 19).replace('T', ' ')
    }
    
    let response
    if (showEditModal.value) {
      response = await api.hazard.update(formData.task_id, formData)
    } else {
      response = await api.hazard.create(formData)
    }
    
    if (response.success) {
      showMessage(showEditModal.value ? '更新成功' : '创建成功', 'success')
      closeCreateModal()
      loadHazards()
      loadStatistics()
    } else {
      showMessage(response.error || (showEditModal.value ? '更新失败' : '创建失败'), 'error')
    }
  } catch (error) {
    console.error('提交隐患失败:', error)
    showMessage('网络错误，请稍后重试', 'error')
  } finally {
    isSubmitting.value = false
  }
}

// 关闭详情模态框
const closeDetailModal = () => {
  showDetailModal.value = false
  selectedHazard.value = null
}

// 关闭创建/编辑模态框
const closeCreateModal = () => {
  showCreateModal.value = false
  showEditModal.value = false
  
  // 重置表单
  Object.assign(hazardForm, {
    task_id: '',
    mine_name: '',
    indicator_name: '',
    safety_level: '',
    trigger_condition: '',
    remediation_suggestion: '',
    responsible_person: '',
    deadline_date: '',
    status: '待整改',
    reviewer: '',
    review_comment: '',
    remarks: '',
    evaluation_id: ''
  })
}

// ========== 图片上传相关方法 ==========

// 上传整改图片
const uploadRemediationImage = (hazard: any) => {
  selectedHazard.value = hazard
  showImageUploadModal.value = true
}

// 关闭图片上传模态框
const closeImageUploadModal = () => {
  showImageUploadModal.value = false
  selectedImageFile.value = null
  imagePreviewUrl.value = ''
  isDragOver.value = false
}

// 关闭图片预览模态框
const closeImagePreviewModal = () => {
  showImagePreviewModal.value = false
  previewImageUrl.value = ''
}

// 触发文件选择
const triggerFileInput = () => {
  if (fileInput.value) {
    fileInput.value.click()
  }
}

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files[0]) {
    const file = target.files[0]
    validateAndSelectImage(file)
  }
}

// 处理拖拽悬停
const handleDragOver = (event: DragEvent) => {
  event.preventDefault()
  isDragOver.value = true
}

// 处理拖拽离开
const handleDragLeave = (event: DragEvent) => {
  event.preventDefault()
  isDragOver.value = false
}

// 处理拖拽放置
const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  isDragOver.value = false
  
  if (event.dataTransfer && event.dataTransfer.files.length > 0) {
    const file = event.dataTransfer.files[0]
    if (file) {
      validateAndSelectImage(file)
    }
  }
}

// 验证并选择图片
const validateAndSelectImage = (file: File) => {
  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
  if (!allowedTypes.includes(file.type)) {
    showMessage('只支持 JPG、PNG、GIF、WebP 格式的图片', 'error')
    return
  }
  
  // 验证文件大小（10MB）
  const maxSize = 10 * 1024 * 1024
  if (file.size > maxSize) {
    showMessage('图片大小不能超过10MB', 'error')
    return
  }
  
  selectedImageFile.value = file
  
  // 创建预览URL
  const reader = new FileReader()
  reader.onload = (e) => {
    imagePreviewUrl.value = e.target?.result as string
  }
  reader.readAsDataURL(file)
}

// 移除选中的图片
const removeSelectedImage = () => {
  selectedImageFile.value = null
  imagePreviewUrl.value = ''
}

// 上传图片
const uploadImage = async () => {
  if (!selectedImageFile.value || !selectedHazard.value) {
    return
  }
  
  try {
    isUploading.value = true
    
    const response = await api.hazard.uploadRemediationImage(
      selectedHazard.value.task_id, 
      selectedImageFile.value
    )
    
    if (response.success) {
      showMessage('整改图片上传成功', 'success')
      closeImageUploadModal()
      
      // 刷新隐患详情
      if (showDetailModal.value) {
        await viewHazardDetail(selectedHazard.value)
      }
      
      // 刷新列表
      loadHazards()
    } else {
      showMessage(response.error || '上传失败', 'error')
    }
  } catch (error) {
    console.error('上传图片失败:', error)
    showMessage('网络错误，请稍后重试', 'error')
  } finally {
    isUploading.value = false
  }
}

// 删除整改图片
const deleteRemediationImage = async (hazard: any) => {
  try {
    const confirmed = await showConfirm('确定要删除这张整改图片吗？')
    if (!confirmed) {
      return
    }
    
    const response = await api.hazard.deleteRemediationImage(hazard.task_id)
    if (response.success) {
      showMessage('整改图片删除成功', 'success')
      
      // 刷新隐患详情
      if (showDetailModal.value) {
        await viewHazardDetail(hazard)
      }
      
      // 刷新列表
      loadHazards()
    } else {
      showMessage(response.error || '删除失败', 'error')
    }
  } catch (error) {
    console.error('删除图片失败:', error)
    showMessage('网络错误，请稍后重试', 'error')
  }
}

// 预览图片
const previewImage = (imageUrl: string) => {
  previewImageUrl.value = imageUrl
  showImagePreviewModal.value = true
}

// ========== 辅助方法 ==========

// 获取安全等级样式类
const getSafetyLevelClass = (level: string) => {
  if (level && (level.includes('C级') || level.includes('一般'))) return 'level-warning'
  if (level && (level.includes('D级') || level.includes('较差'))) return 'level-danger'
  return 'level-default'
}

// 获取安全等级文本
const getSafetyLevelText = (level: string) => {
  if (level && (level.includes('C级') || level.includes('一般'))) return '较危险(C级)'
  if (level && (level.includes('D级') || level.includes('较差'))) return '危险(D级)'
  return level || '未知'
}

// 获取状态样式类
const getStatusClass = (status: string) => {
  const statusClasses: { [key: string]: string } = {
    '待整改': 'status-pending',
    '整改中': 'status-progress',
    '整改完成': 'status-completed',
    '复核通过': 'status-verified',
  }
  return statusClasses[status] || 'status-default'
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleDateString('zh-CN')
}

// 格式化日期时间
const formatDateTime = (dateString: string) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString('zh-CN')
}

// 格式化日期时间用于输入框
const formatDateTimeForInput = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day}T${hours}:${minutes}`
}

// 格式化文件大小
const formatFileSize = (size: number) => {
  if (!size) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB']
  let i = 0
  while (size >= 1024 && i < units.length - 1) {
    size /= 1024
    i++
  }
  return `${size.toFixed(1)} ${units[i]}`
}

// 格式化评价信息工具提示
const formatEvaluationTooltip = (evalInfo: any) => {
  if (!evalInfo) return ''
  return `评价日期: ${evalInfo.evaluation_date}\n评价人: ${evalInfo.evaluator_name}\n安全等级: ${evalInfo.safety_level}\n综合得分: ${evalInfo.comprehensive_score}`
}

// ========== 生命周期 ==========
onMounted(() => {
  loadHazards()
  loadStatistics()
  loadEvaluations()
})
</script>

<style scoped>
/* ========== 页面基础样式 ========== */
.hazard-management {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  margin: 0 0 24px 0;
  color: #7f8c8d;
  font-size: 16px;
}

/* ========== 统计卡片 ========== */
.statistics-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stat-card.warning {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.progress {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.success {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card.danger {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* ========== 控制区域 ========== */
.hazard-controls {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.search-section {
  margin-bottom: 16px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.search-bar i {
  color: #95a5a6;
  position: absolute;
  left: 12px;
  z-index: 1;
}

.search-bar input {
  flex: 1;
  padding: 12px 12px 12px 40px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  position: relative;
}

.search-bar input:focus {
  border-color: #3498db;
  outline: none;
}

.filter-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-controls select {
  padding: 10px 12px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 14px;
  min-width: 120px;
}

.filter-controls select:focus {
  border-color: #3498db;
  outline: none;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ========== 按钮样式 ========== */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2980b9;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #95a5a6;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #7f8c8d;
}

.btn-success {
  background: #2ecc71;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #27ae60;
}

.btn-warning {
  background: #f39c12;
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: #e67e22;
}

.btn-danger {
  background: #e74c3c;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #c0392b;
}

.btn-info {
  background: #1abc9c;
  color: white;
}

.btn-info:hover:not(:disabled) {
  background: #16a085;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-outline-primary {
  background: transparent;
  color: #3498db;
  border: 1px solid #3498db;
}

.btn-outline-primary:hover {
  background: #3498db;
  color: white;
}

/* ========== 表格样式 ========== */
.hazard-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  text-align: center;
  color: #3498db;
}

.loading-spinner i {
  font-size: 32px;
  margin-bottom: 12px;
}

.hazard-table {
  width: 100%;
  border-collapse: collapse;
}

.hazard-table th {
  background: #f8f9fa;
  padding: 16px 12px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e9ecef;
}

.hazard-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

.hazard-table tr:hover {
  background: #f8f9fa;
}

.hazard-table tr.overdue {
  background: #ffeaa7;
}

.hazard-table tr.overdue:hover {
  background: #fdcb6e;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #95a5a6;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

/* ========== 标签样式 ========== */
.level-badge, .status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.level-warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.level-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-progress {
  background: #d1ecf1;
  color: #0c5460;
}

.status-completed {
  background: #d4edda;
  color: #155724;
}

.status-verified {
  background: #cce5ff;
  color: #0056b3;
}

/* ========== 文本颜色 ========== */
.text-danger {
  color: #e74c3c !important;
  font-weight: 500;
}

.text-warning {
  color: #f39c12 !important;
  font-weight: 500;
}

.text-muted {
  color: #6c757d !important;
}

/* ========== 评价链接样式 ========== */
.evaluation-link {
  color: #3498db;
  font-weight: 500;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.evaluation-link:hover {
  color: #2980b9;
}

/* ========== 分页样式 ========== */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-info {
  color: #7f8c8d;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ========== 模态框样式 ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hazard-detail-modal {
  width: 800px;
}

.hazard-create-modal {
  width: 600px;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #95a5a6;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.close-btn:hover {
  color: #e74c3c;
  background: #f8f9fa;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ========== 详情页面样式 ========== */
.detail-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-group {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
}

.detail-group h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  font-weight: 500;
  color: #7f8c8d;
  min-width: 100px;
}

.info-item .value {
  flex: 1;
  color: #2c3e50;
}

.trigger-condition, .remediation-suggestion, .remarks {
  color: #2c3e50;
  line-height: 1.6;
  margin: 0;
}

.review-comment {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.review-comment h5 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
}

.review-comment p {
  margin: 0;
  color: #2c3e50;
  line-height: 1.6;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.attachment-item i {
  color: #3498db;
  font-size: 16px;
}

.attachment-name {
  flex: 1;
  font-weight: 500;
  color: #2c3e50;
}

.attachment-size {
  color: #7f8c8d;
  font-size: 12px;
}

.attachment-date {
  color: #7f8c8d;
  font-size: 12px;
}

/* ========== 表单样式 ========== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.required {
  color: #e74c3c;
}

.form-group input, .form-group select, .form-group textarea {
  padding: 10px 12px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group textarea {
  min-height: 80px;
}

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
  .hazard-management {
    padding: 16px;
  }
  
  .statistics-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-controls {
    justify-content: center;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .hazard-table {
    font-size: 12px;
  }
  
  .hazard-table th, .hazard-table td {
    padding: 8px 6px;
  }
  
  .pagination-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .modal {
    max-width: 95vw;
    margin: 10px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== 图片上传样式 ========== */
.image-upload-modal {
  width: 500px;
}

.upload-container {
  padding: 20px;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.upload-area:hover {
  border-color: #3498db;
  background: #f0f8ff;
}

.upload-area.drag-over {
  border-color: #3498db;
  background: #e3f2fd;
  transform: scale(1.02);
}

.upload-placeholder {
  color: #7f8c8d;
}

.upload-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
  color: #bdc3c7;
}

.upload-placeholder p {
  margin: 8px 0;
  font-size: 16px;
}

.upload-hint {
  font-size: 12px !important;
  color: #95a5a6 !important;
}

.image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.preview-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.file-name {
  font-weight: 500;
  color: #2c3e50;
  word-break: break-all;
}

.file-size {
  color: #7f8c8d;
  font-size: 12px;
}

/* ========== 整改图片展示样式 ========== */
.remediation-image-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: #f8f9fa;
}

.remediation-image {
  max-width: 300px;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.remediation-image:hover {
  transform: scale(1.05);
}

.image-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}

.image-name {
  flex: 1;
  font-weight: 500;
  color: #2c3e50;
  word-break: break-all;
}

/* ========== 图片预览模态框样式 ========== */
.image-preview-modal {
  width: 90vw;
  max-width: 1000px;
}

.full-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 24px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .modal-header, .modal-body, .modal-footer {
    padding: 16px;
  }
}
</style>